{extend name="layout/layout_simple" /}
{block name="content"}
<div id="app" style="padding: 20px">
    <form method="post" action="{:url('goods/editSpec')}">
        <input type="hidden" name="goods_id" value="{$Think.request.id}"/>
        <p style="margin-left: 20px">第一个为默认规格. 规格移除后不可恢复，请谨慎操作。</p>
        <div id="form-spec">
            <div class="form-inline" style="margin-bottom: 20px;" v-for="(item, index) in list">
                <input type="hidden" name="id[]" v-model="item.id"/>
                <div class="form-group">
                    <label style="width: 80px;">名 称</label>
                    <input v-model="item.suk" name="suk[]" type="text" class="form-control" style="width: 180px">
                </div>
                <div class="form-group">
                    <label style="width: 80px;">金 额</label>
                    <input v-model="item.price" name="price[]" type="number" class="form-control"
                           style="width: 120px" placeholder="0.00">
                </div>
                <div class="form-group">
                    <label style="width: 80px;">库 存</label>
                    <input v-model="item.stock" name="stock[]" type="number" class="form-control"
                           style="width: 120px">
                </div>
                <button type="button" class="btn btn-outline-primary dom-remove" @click="handleRemove(index)"
                        style="margin-left: 10px; font-size: 20px;"><i class="fa fa-remove"></i></button>
            </div>
        </div>
        <br/>
        <div style="text-align: center">
            <button type="button" class="btn btn-outline-primary dom-plus" @click="handleAdd"
                    style="margin-left: 20px; font-size: 20px;"><i class="fa fa-plus"></i></button>
            <button type="button" class="btn btn-primary" @click="handleSubmit">保 存</button>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script>
  var json = JSON.parse('{$list|json_encode|raw}');
  var list = json.length == 0 ? [{
    "id": "",
    "goods_id": "",
    "suk": "",
    "price": "",
    "stock": "",
  }] : json;

  new Vue({
    el: '#app',
    data: {
      list: list,
    },
    methods: {
      handleRemove(index) {
        this.list.splice(index, 1);
      },
      handleAdd() {
        this.list.push({
          "id": "",
          "goods_id": "",
          "suk": "",
          "price": "",
          "stock": "",
        });
      },
      handleSubmit() {

        for (let i of this.list) {
          if (i.suk == '' || i.price == '' || i.stock == '') {
            layer.msg('有内容未填写');
            return;
          }
        }
        $('form').submit();
      },
    }
  })
</script>
{/block}